<template>
  <div>
    <el-dialog
     :title="type==0?'添加':'编辑'"
     :visible.sync="dialogVisible"
     width="30%"
     :before-close="handleClose">

     <!-- 表单 -->
    <el-form :model="ruleForm" 
    :rules="rules" 
    ref="ruleForm" 
    label-width="100px" 
    class="demo-ruleForm">
    <el-form-item label="用户ID" prop="userId">
    <el-input v-model="ruleForm.userId"></el-input>
    </el-form-item>
    <el-form-item label="微信昵称" prop="name">
       <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="会员手机" prop="tel">
       <el-input v-model="ruleForm.tel"></el-input>
    </el-form-item>
     <el-form-item label="消费金额" prop="money">
       <el-input v-model.number="ruleForm.money"></el-input>
    </el-form-item>
    <el-form-item label="订单数量" prop="num">
       <el-input v-model.number="ruleForm.num"></el-input>
    </el-form-item>
    <el-form-item label="会员等级" prop="level">
       <el-input v-model.number="ruleForm.level"></el-input>
    </el-form-item>
    </el-form>
     <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialogFun">取 消</el-button>
    <el-button type="primary"  @click="submitForm('ruleForm')">提 交</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { AddMessageApi,editorHandleApi } from "../../../api/ljjApi";
export default {
  props:['item','type'],
    data() {
      return {
        dialogVisible: true,
        ruleForm: {
            userId:'',
            name:'',
            tel:'',
            money:'',
            num:'',
            level:'',
        },
        rules:{
          userId:[
             { required: true, message: '请输入用户ID', trigger: 'blur' }
          ],
            name: [
            { required: true, message: '请输入微信昵称', trigger: 'blur' },
          ],
          tel: [
            { required: true, message: '请输入会员手机', trigger: 'blur' },
          ],
          money: [
            { required: true, message: '请输入消费金额', trigger: 'blur' },
          ],
          num: [
            { required: true, message: '请输入订单数量', trigger: 'blur' },
          ],
          level: [
            { required: true, message: '请输入会员等级', trigger: 'blur' },
          ],
        }
      };
    },
    mounted() {
      // var{}=this.item
      this.ruleForm = JSON.parse(JSON.stringify(this.item))
    },
    methods: {
      open2(message) {
        this.$message({
          message,
          type: 'success'
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.ruleForm);
            if(this.type==0){
              AddMessageApi(this.ruleForm).then(res=>{
              console.log("res",res);
              if(res.code==200){
                this.$emit('resetTable')//刷新表格
                this.$emit('closeDialog')//关闭弹窗
                this.open2('添加信息成功')
              }
            })
            }else{
             editorHandleApi(this.ruleForm).then(res=>{
              console.log('res',res);
              if(res.code==200){
                this.$emit('resetTable')//刷新表格
                this.$emit('closeDialog')//关闭弹窗
                this.open2('编辑信息成功')
              }
             })

            }
            // alert('submit!');          
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
     closeDialogFun(){
        this.$emit('closeDialog')
     },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.closeDialogFun()
          })
          .catch(_ => {});
      }
    }

}
</script>

<style>

</style>